﻿
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="content-type" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
    <title>home</title>

    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/nav.css">
    <link rel="stylesheet" href="../css/font-awesome.css">
    <link rel="stylesheet" href="../css/element/index.css">

    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
<div id="wrapper" v-cloak>
    <!--导航栏-->
    <div class="menuW" style="float: left">
        <div class="sideMenu">
            <div class="head">汽车租赁系统</div>
            <ul>
                <li class="nLi on">
                    <h3><i class="fa fa-dashboard"></i>首页<span class="fa fa-angle-up arrow"></span></h3>
                    <ul class="sub">
                        <li><a href="index.html" class="active"><i class="fa fa-dashboard"></i>首页</a></li>
                    </ul>
                </li>
                <li class="nLi on">
                    <h3><i class="fa fa fa-dashboard icon"></i>信息展示<span class="fa fa-angle-up arrow"></span>
                    </h3>
                    <ul class="sub">
						<li v-if="authority.indexOf(1) != -1">
							<a href="adminInfo.html"><i class="fa fa-table"></i>超级管理员信息</a>
						</li>
						<li v-if="authority.indexOf(2) != -1">
							<a href="businessInfo.html"><i class="fa fa-table"></i>店员信息</a>
						</li>
						<li v-if="authority.indexOf(3) != -1">
							<a href="userInfo.html"><i class="fa fa-table"></i>顾客信息</a>
						</li>
						<li v-if="authority.indexOf(5) != -1">
							<a href="messageInfo.html"><i class="fa fa-table"></i>留言板</a>
						</li>
						<li v-if="authority.indexOf(6) != -1">
							<a href="checkInfo.html"><i class="fa fa-table"></i>人员检测信息</a>
						</li>
						<li v-if="authority.indexOf(9) != -1">
							<a href="submitInfo.html"><i class="fa fa-table"></i>事故检查</a>
						</li>
						<li v-if="authority.indexOf(10) != -1">
							<a href="richtextInfo.html"><i class="fa fa-table"></i>政策信息宣传</a>
						</li>
						<li v-if="authority.indexOf(1000001) != -1">
							<a href="advertiserInfo.html"><i class="fa fa-table"></i>通知管理</a>
						</li>
						<li v-if="authority.indexOf(1000009) != -1">
							<a href="typeInfo.html"><i class="fa fa-table"></i>汽车类型</a>
						</li>
						<li v-if="authority.indexOf(1000010) != -1">
							<a href="goodsInfo.html"><i class="fa fa-table"></i>汽车详情管理</a>
						</li>
						<li v-if="authority.indexOf(1000012) != -1">
							<a href="orderInfo.html"><i class="fa fa-table"></i>订单信息</a>
						</li>
						<li v-if="authority.indexOf(1000013) != -1">
							<a href="commentInfo.html"><i class="fa fa-table"></i>评价信息</a>
						</li>

                        <li>
                            <a href="javascript:void(0)" @click="personalPage"><i class="fa fa-user"></i>个人信息</a>
                        </li>
                    </ul>
                </li>
				<li class="nLi">
					<h3><i class="fa fa-table"></i>政策信息宣传<span class="fa fa-angle-up arrow"></span></h3>
					<ul class="sub">
						<li>
							<a href="richtextInfoComment.html"><i class="fa fa-unlock-alt"></i>政策信息宣传评论</a>
						</li>
					</ul>
				</li>

                <li class="nLi">
                    <h3><i class="fa fa-unlock-alt"></i>修改密码<span class="fa fa-angle-up arrow"></span></h3>
                    <ul class="sub">
                        <li>
                            <a href="updatePassword.html"><i class="fa fa-unlock-alt"></i>修改密码</a>
                        </li>
                    </ul>
                </li>
                <li class="nLi">
                    <h3><i class="fa fa-power-off"></i>退出登录<span class="fa fa-angle-up arrow"></span></h3>
                    <ul class="sub">
                        <li>
                            <a href="javascript:void(0)" @click="logout"><i class="fa fa-power-off"></i>退出登录</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <!-- 主体 -->
    <div class="main">
        <!-- 头部开始 -->
        <div class="main-head" style="width: 100%; display: flex">
            <div style="flex: 4; text-align: left">
                <a href="/front/index.html">返回前台首页</a>
<!--                <a v-if="isHigh" href="checkInfo.html">-->
<!--                <span style="color: red; margin-left: 20px">有用户体温超过阈值，请在人员检测模块里查看！！-->
<!--                            </span></a>-->
<!--                <a v-if="isLocation" href="checkInfo.html">-->
<!--                <span style="color: red; margin-left: 20px">有用户不是本地人，请在人员检测模块里查看！！-->
<!--                            </span></a>-->
            </div>
            <div style="flex: 1; text-align: right">
                <a href="javascript:void(0)" @click="personalPage"><span>您好，<span style="color: #8470FF">{{user.name}}</span></span></a>
                <a href="javascript:void(0)" @click="logout" style="padding:0 10px;">退出登录</a>
            </div>
        </div>
        <!-- 头部结束 -->

        <!-- 色块 -->
        <div style="padding: 20px; display: flex; flex-wrap: wrap; justify-content: space-start;">
            <div style="width: 12%; margin-right: 25px; margin-bottom: 10px;">
                <div style="padding: 10px; text-align: center; color: #666; border-bottom: 1px solid #ccc">
                    <div style="font-size: 16px; margin-bottom: 10px">用户总数</div>
                    <div style="">{{totalUser}}</div>
                </div>
            </div>
            <div style="width: 12%; margin-right: 25px; margin-bottom: 10px;">
                <div style="padding: 10px; text-align: center; color: #666; border-bottom: 1px solid #ccc">
                    <div style="font-size: 16px; margin-bottom: 10px">总销售额</div>
                    <div style="">{{totalPrice}}</div>
                </div>
            </div>
            <div style="width: 12%; margin-right: 25px; margin-bottom: 10px;">
                <div style="padding: 10px; text-align: center; color: #666; border-bottom: 1px solid #ccc">
                    <div style="font-size: 16px; margin-bottom: 10px">总销量</div>
                    <div style="">{{totalShopping}}</div>
                </div>
            </div>
        </div>

        <!-- 主体开始 -->
        <div id="main"  style="padding: 0 20px">
            <!-- echarts -->
            <div class="row">
                <div class="col-md-12" style="margin-top: 20px">
                    <div class="panel panel-default">
                        <div class="panel-heading" style="color: goldenrod">
                            <select @change="selectEchartsType" v-model="echartsType">
                                <option value="bar" style="color: gray">柱状图</option>
                                <option value="pie" style="color: gray">饼图</option>
                            </select>
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div id="left" style="width: 100%;height:400px;"></div>
                                </div>
                                <div class="col-md-6">
                                    <div id="right" style="width: 100%;height:400px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- 主体结束 -->
    </div>
</div>

<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/nav.js"></script>
<script src="../js/my.js"></script>
<script src="../js/vue2.6.11/vue.min.js"></script>
<script src="../js/vue2.6.11/axios.js"></script>
<script src="../js/echarts.min.js"></script>
<script src="../js/element/index.js"></script>

<script>

    new Vue({
        el: "#wrapper",
        data: {
            user: {},
            authority: [],
            totalUser: 0,
            totalComment: 0,
            totalPrice: 0,
            totalShopping: 0,
            echartsShowLeftArr: [],
            echartsShowRightArr: [],
            echartsType: 'pie',
            isHigh: false,
            isLocation: false
        },
        created: function () {
            this.user = JSON.parse(localStorage.getItem("user"));

            axios.get("/authority").then(res => {
                if (res.data.code === '0') {
                    this.authority = res.data.data;
                } else {
                    msg('error', res.data.msg);
                }
            });

            axios.get("/echarts/getTotal").then(res => {
                if (res.data.code === '0') {
                    let map = res.data.data;
                    this.totalUser = map['totalUser'];
                    this.totalComment = map['totalComment'];
                    this.totalPrice = map['totalPrice'];
                    this.totalShopping = map['totalShopping'];
                }
            });

            this.drawLine();

            axios.get("/checkInfo/check/temperature").then(res => {
                if (res.data.code !== '0') {
                    this.isHigh = true;
                }
            })

            axios.get("/checkInfo/check/location").then(res => {
                if (res.data.code !== '0') {
                    this.isLocation = true;
                }
            })
        },
        methods: {
            drawLine() {
                axios.get('/echarts/get/price').then(res => {
                    // 基于准备好的dom，初始化echarts实例
                    this.echartsShowLeftArr = res.data.data;
                    if (this.echartsShowLeftArr.length) {
                        let myChart = echarts.init(document.getElementById('left'));
                        let option = this.getEchartsType(this.echartsShowLeftArr, this.echartsType);
                        myChart.setOption(option, true);
                    }
                });
                axios.get('/echarts/get/shopping').then(res => {
                    // 基于准备好的dom，初始化echarts实例
                    this.echartsShowRightArr = res.data.data;
                    if (this.echartsShowRightArr.length) {
                        let myChart = echarts.init(document.getElementById('right'));
                        let option = this.getEchartsType(this.echartsShowRightArr, this.echartsType);
                        myChart.setOption(option, true);
                    }
                });
            },
            selectEchartsType() {
                let leftChart = echarts.init(document.getElementById('left'));
                let leftOption = this.getEchartsType(this.echartsShowLeftArr, this.echartsType);
                leftChart.setOption(leftOption, true);

                let rightChart = echarts.init(document.getElementById('right'));
                let rightOption = this.getEchartsType(this.echartsShowRightArr, this.echartsType);
                rightChart.setOption(rightOption, true);
            },
            getEchartsType(echartsArr, type) {
                for (let item of echartsArr) {
                    if (item.series[0].type === type) {
                        return item;
                    }
                }
            },
            logout() {
                logout();
            }
        }
    });


</script>

</body>
</html>
